import { useRef, useEffect } from 'react';

/**
 * 使用requestAnimationFrame的动画Hook
 * @param {Function} callback - 动画回调函数
 * @param {boolean} [isRunning=true] - 是否运行动画
 */
export const useAnimationFrame = (callback, isRunning = true) => {
  const requestRef = useRef();
  const previousTimeRef = useRef();

  const animate = (time) => {
    if (previousTimeRef.current !== undefined) {
      const deltaTime = time - previousTimeRef.current;
      callback(deltaTime);
    }
    previousTimeRef.current = time;
    requestRef.current = requestAnimationFrame(animate);
  };

  useEffect(() => {
    if (isRunning) {
      requestRef.current = requestAnimationFrame(animate);
    }
    return () => cancelAnimationFrame(requestRef.current);
  }, [isRunning]);
};

/**
 * FLIP动画控制器
 */
export class FLIPAnimator {
  constructor(element) {
    this.element = element;
    this.first = null;
    this.last = null;
    this.invert = null;
    this.play = null;
  }

  recordFirst() {
    this.first = this.element.getBoundingClientRect();
  }

  recordLast() {
    this.last = this.element.getBoundingClientRect();
  }

  calculateInvert() {
    if (!this.first || !this.last) return;
    this.invert = {
      x: this.first.left - this.last.left,
      y: this.first.top - this.last.top,
      scaleX: this.first.width / this.last.width,
      scaleY: this.first.height / this.last.height
    };
  }

  playAnimation(duration = 300, easing = 'cubic-bezier(0.25, 0.8, 0.25, 1)') {
    if (!this.invert) return;

    this.element.style.transform = `
      translate(${this.invert.x}px, ${this.invert.y}px)
      scale(${this.invert.scaleX}, ${this.invert.scaleY})
    `;
    this.element.style.transition = 'none';

    requestAnimationFrame(() => {
      this.element.style.transform = '';
      this.element.style.transition = `
        transform ${duration}ms ${easing}
      `;
    });
  }
}

/**
 * 交互动画优化器
 */
export const useInteractionAnimation = (ref, effectType = 'scale') => {
  const animValues = {
    scale: { active: 'scale(0.95)', hover: 'scale(1.05)' },
    lift: { active: 'translateY(-4px)', hover: 'translateY(-2px)' }
  };

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const activeTransform = animValues[effectType]?.active || '';
    const hoverTransform = animValues[effectType]?.hover || '';

    const handleMouseDown = () => {
      element.style.transition = 'transform 0.1s ease';
      element.style.transform = activeTransform;
    };

    const handleMouseUp = () => {
      element.style.transition = 'transform 0.3s ease';
      element.style.transform = '';
    };

    const handleMouseEnter = () => {
      element.style.transition = 'transform 0.3s ease';
      element.style.transform = hoverTransform;
    };

    const handleMouseLeave = () => {
      element.style.transition = 'transform 0.3s ease';
      element.style.transform = '';
    };

    element.addEventListener('mousedown', handleMouseDown);
    element.addEventListener('mouseup', handleMouseUp);
    element.addEventListener('mouseenter', handleMouseEnter);
    element.addEventListener('mouseleave', handleMouseLeave);

    return () => {
      element.removeEventListener('mousedown', handleMouseDown);
      element.removeEventListener('mouseup', handleMouseUp);
      element.removeEventListener('mouseenter', handleMouseEnter);
      element.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, [ref, effectType]);
};
